<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="listen()" style="position: fixed; left: 50vw;top: 50vh">再次监听</button>
<div style="background-color: #abcdef; height: 90vh"></div>
<div style="background-color: cornsilk;height: 30vh"></div>
<div style="background-color: olivedrab;height: 10vh" id="target"></div>
</body>
<script>
    const target = document.getElementById('target');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 元素进入可视区域，执行加载逻辑
                console.log('Element is in view');

                // 加载完成后取消监听
                observer.unobserve(target);
            }
        });
    }, {
        rootMargin: '0px',
        threshold: 0.1,
    });

const init = () => {
    observer.observe(target);
}

const listen = () => {
    console.log(22);
    observer.observe(target);
}
window.onload = () => {
    init()
}
</script>
</html>
